<template>
  <el-card
    v-loading="!data || loading"
    element-loading-text="拼命加载中"
    class="card"
  >
    <div>
      <el-form
        class="content"
        v-if="data"
        ref="form"
        :model="data"
        :rules="rules"
        label-width="180px"
        label-position="left"
        style="font-size: 50px"
      >
        <el-row>
          <el-col :span="23">
            <el-form-item label="企业名称" prop="unitName">
              <el-input v-model="data.unitName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="尾矿库名称" prop="tailingName">
              <el-input v-model="data.tailingName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="尾矿库详细地址" prop="detailAddress">
              <el-input v-model="data.detailAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="营业执照" prop="businessLicense">
              <el-input v-model="data.businessLicense"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="工商登记机关" prop="registrationAuthority">
              <el-input v-model="data.registrationAuthority"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="采矿许可证" prop="miningLicense">
              <el-input v-model="data.miningLicense"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="登记机关" prop="miningAuthority">
              <el-input v-model="data.miningAuthority"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="所 属 行 业" prop="industryGroupSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.industryGroupSet"
                @change="checkRadioChange(data.industryGroupSet)"
              >
                <el-checkbox
                  :label="item"
                  :key="index"
                  v-for="(item, index) in industry"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="企 业 性 质" prop="enterpriseNatureGroupSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.enterpriseNatureGroupSet"
                @change="checkRadioChange(data.enterpriseNatureGroupSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in enterpriseNature"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="隶 属 关 系" prop="affiliationGroupSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.affiliationGroupSet"
                @change="checkRadioChange(data.affiliationGroupSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in affiliation"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="设计服务年限(年)" prop="useYear">
              <el-input v-model="data.useYear"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="设计最终堆积高程(m)"
              prop="finalStackingElevation"
            >
              <el-input v-model="data.finalStackingElevation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="设计有效库容(万m³)" prop="designTotalCapacity">
              <el-input v-model="data.designTotalCapacity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="设计最小浸润线埋深(m)"
              prop="designMinWettingLineDepth"
            >
              <el-input v-model="data.designMinWettingLineDepth"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="设计总坝高(m)" prop="designTotalDamHeight">
              <el-input v-model="data.designTotalDamHeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="设计初期最大坝高(m)"
              prop="initialDamMaxHeight"
            >
              <el-input v-model="data.initialDamMaxHeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="设计总外坡比" prop="designTotalDamOutRatio">
              <el-input v-model="data.designTotalDamOutRatio"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="安全设施是否三同时" prop="isThreeSimultaneous">
              <el-radio-group v-model="data.isThreeSimultaneous">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="初期坝外坡比" prop="initialDamOutRatio">
              <el-input v-model="data.initialDamOutRatio"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="干滩坡比" prop="dryBeachRatio">
              <el-input v-model="data.dryBeachRatio"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="初期坝顶标高(m)" prop="initialDamTopHeight">
              <el-input v-model="data.initialDamTopHeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="放矿方式" prop="drawingOreGroupSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.drawingOreGroupSet"
                @change="checkRadioChange(data.drawingOreGroupSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in drawingOre"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item
              label="排洪系统型式"
              prop="floodDischargeSystemTypeGroupSet"
            >
              <el-checkbox-group
                class="bordered"
                v-model="data.floodDischargeSystemTypeGroupSet"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in floodDischargeSystemType"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="尾矿库形式" prop="tailingTypeIdSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.tailingTypeIdSet"
                @change="checkRadioChange(data.tailingTypeIdSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in tailingspondType"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="尾矿库设计等别"
              prop="designLevelIdSet"
            >
              <el-checkbox-group
                class="bordered"
                v-model="data.designLevelIdSet"
                @change="checkRadioChange(data.designLevelIdSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in tailingspondPresentLevel"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="尾矿库现状等别" prop="tailingLevelIdSet">
              <el-checkbox-group
                class="bordered"
                v-model="data.tailingLevelIdSet"
                @change="checkRadioChange(data.tailingLevelIdSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in tailingspondLevel"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="安全设施设计编制单位"
              prop="safetyFacilityDesignCompiler"
            >
              <el-input v-model="data.safetyFacilityDesignCompiler"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="安全设施设计审批单位"
              prop="safetyFacilityDesignApprover"
            >
              <el-input v-model="data.safetyFacilityDesignApprover"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="尾矿库建设施工单位"
              prop="damConstructionWorker"
            >
              <el-input v-model="data.damConstructionWorker"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="尾矿库建设监理单位"
              prop="damConstructionSupervisor"
            >
              <el-input v-model="data.damConstructionSupervisor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="安全设施验收评价单位"
              prop="safetyFacilityAcceptor"
            >
              <el-input v-model="data.safetyFacilityAcceptor"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="尾矿年排放量(万t)" prop="tailingOutput">
              <el-input v-model="data.tailingOutput"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="设计地震烈度（度）"
              prop="designEarthquakeIntensity"
            >
              <el-input v-model="data.designEarthquakeIntensity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="尾矿输送方式"
              prop="tailingsConveyingTypeGroupSet"
            >
              <el-checkbox-group
                class="bordered"
                v-model="data.tailingsConveyingTypeGroupSet"
                @change="checkRadioChange(data.tailingsConveyingTypeGroupSet)"
              >
                <el-checkbox
                  :label="item"
                  name="type"
                  :key="index"
                  v-for="(item, index) in tailingsConveyingType"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="尾矿平均粒径(mm)"
              prop="averageParticleDiameter"
            >
              <el-input v-model="data.averageParticleDiameter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="尾矿密度(g/cm³)" prop="tailingsDensity">
              <el-input v-model="data.tailingsDensity"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="平均矿浆浓度(%)"
              prop="averageSlurryConcentration"
            >
              <el-input v-model="data.averageSlurryConcentration"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="尾矿堆积干密度(g/cm³)"
              prop="tailingsAccumulationDryDensity"
            >
              <el-input
                v-model="data.tailingsAccumulationDryDensity"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="主河槽长度(m)" prop="mainChannelLength">
              <el-input v-model="data.mainChannelLength"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item label="汇 水 面 积(k㎡)" prop="catchmentArea">
              <el-input v-model="data.catchmentArea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="防洪标准（初期）"
              prop="initialFloodControlStandard"
            >
              <el-input v-model="data.initialFloodControlStandard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="11">
            <el-form-item
              label="防洪标准（中、后期）"
              prop="mid2LateFloodControlStandards"
            >
              <el-input v-model="data.mid2LateFloodControlStandards"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="滩顶高度" prop="beachTopElevation">
              <el-input v-model="data.beachTopElevation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item
              label="是否有安全监测设施"
              prop="hasSafetyMonitoringFacilities"
            >
              <el-radio-group v-model="data.hasSafetyMonitoringFacilities">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :offset="1" :span="11">
            <el-form-item label="是否重大危险源" prop="isMajorDanger">
              <el-radio-group v-model="data.isMajorDanger">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item
              label="下游村庄及重要构（建）筑物情况"
              prop="downstreamConstructionSituation"
            >
              <el-radio-group v-model="data.downstreamConstructionSituation">
                <el-radio :label="true">有</el-radio>
                <el-radio :label="false">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item
              label="库区有三违情况（建筑、采矿、爆破）"
              prop="damViolations"
            >
              <el-radio-group v-model="data.damViolations">
                <el-radio :label="true">有</el-radio>
                <el-radio :label="false">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 提交按钮 -->
        <el-row>
          <el-col :span="11" :offset="12">
            <div class="button-part">
              <el-button @click="submit" type="primary">提交</el-button>
              <el-button @click="cancel(false)">取消</el-button>
            </div>
          </el-col>
        </el-row>
        <br />
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { getEnterpriseDetails, setEnterpriseDetails , getTailingInfoDetails } from "~/interface/info/EnterpriseInfo";
import * as _ from "lodash";
import {mapGetters} from "vuex";

const industry = ['黑色金属矿采选业', '有色金属矿采选业', '非金属矿采选业', '其他采矿业'];
const enterpriseNature = ['国有', '集体', '民营', '私营', '合资', '独资', '其他'];
const affiliation = ['中央', '省属', '市属', '县(市、区)', '乡镇', '其他'];
const drawingOre = ['湿式堆存', '干式堆存', '膏体堆存', '其他'];
const floodDischargeSystemType = ['井管', '井洞', '槽管', '槽洞', '溢洪道', '截洪沟', '截洪坝', '其他'];
const tailingspondType = ['山谷型', '傍山型', '平地型', '截河型'];
const tailingspondLevel = ['一等', '二等', '三等', '四等', '五等'];
const tailingspondPresentLevel = ['一等', '二等', '三等', '四等', '五等'];
const tailingsConveyingType = ['自流', '机械'];
export default {
  name: "EnterpriseInfo",
  data () {
    const isNum = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('只能为数字'))
      } else {
        callback()
      }
    }
    return {
      industry,
      enterpriseNature,
      affiliation,
      drawingOre,
      floodDischargeSystemType,
      tailingspondType,
      tailingspondLevel,
      tailingspondPresentLevel,
      tailingsConveyingType,
      data: {
        id: null,
        unitName:"",
        tailingName: "",
        detailAddress: null,
        businessLicense: null,
        registrationAuthority: null,
        miningLicense: null,
        miningAuthority: null,
        industryGroupSet: [],
        enterpriseNatureGroupSet: [],
        affiliationGroupSet: [],
        useYear: null,
        finalStackingElevation: null,
        designTotalCapacity: null,
        designMinWettingLineDepth: null,
        designTotalDamHeight: null,
        initialDamMaxHeight: null,
        designTotalDamOutRatio: null,
        isThreeSimultaneous: null,
        initialDamOutRatio:"",
        dryBeachRatio:"",
        initialDamTopHeight:null,
        drawingOreGroupSet: [],
        floodDischargeSystemTypeGroupSet: [],
        tailingTypeIdSet:[],
        tailingLevelIdSet:[],
        designLevelIdSet:[],
        safetyFacilityDesignCompiler: null,
        safetyFacilityDesignApprover: null,
        damConstructionWorker: null,
        damConstructionSupervisor: null,
        safetyFacilityAcceptor: null,
        tailingOutput: null,
        designEarthquakeIntensity: null,
        tailingsConveyingTypeGroupSet: [],
        averageParticleDiameter: null,
        averageSlurryConcentration: null,
        tailingsAccumulationDryDensity: null,
        mainChannelLength: null,
        catchmentArea: null,
        initialFloodControlStandard: null,
        hasSafetyMonitoringFacilities: null,
        damViolations: null,
        beachTopElevation:null,
        downstreamConstructionSituation: null,
        tailingsDensity: null,
        mid2LateFloodControlStandards: null
      },
      rules: {
        unitName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        tailingName: [],
        detailAddress: [],
        businessLicense: [],
        registrationAuthority: [],
        miningLicense: [],
        miningAuthority: [],
        industryGroupSet: [],
        enterpriseNatureGroupSet: [],
        affiliationGroupSet: [],
        useYear: [{ trigger: 'blur', validator: isNum, message: "设计年限应该是一个数值" },],
        finalStackingElevation: [{ trigger: 'blur', validator: isNum, message: "设计最终堆积高程应该是一个数值" },],
        designTotalCapacity: [{ trigger: 'blur', validator: isNum, message: "设计有效库容应该是一个数值" },],
        designMinWettingLineDepth: [{ trigger: 'blur', validator: isNum, message: "设计最小浸润线埋深应该是一个数值" },],
        designTotalDamHeight: [{ trigger: 'blur', validator: isNum, message: "设计总坝高应该是一个数值" },],
        initialDamMaxHeight: [{ trigger: 'blur', validator: isNum, message: "设计初期最大坝高应该是一个数值" },],
        designTotalDamOutRatio: [],
        isThreeSimultaneous: [],
        initialDamOutRatio:"",
        dryBeachRatio:"",
        initialDamTopHeight:[{ trigger: 'blur', validator: isNum, message: "初期坝顶标高应该是一个数值" },],
        drawingOreGroupSet: [],
        floodDischargeSystemTypeGroupSet: [],
        tailingTypeIdSet:[],
        tailingLevelIdSet:[{type:"array",required:true,message:"请至少选择一个为尾矿库现状等级",triangle:"change"}],
        designLevelIdSet:[],
        safetyFacilityDesignCompiler: [],
        safetyFacilityDesignApprover: [],
        damConstructionWorker: [],
        damConstructionSupervisor: [],
        safetyFacilityAcceptor: [],
        tailingOutput: [{ trigger: 'blur', validator: isNum, message: "尾矿年排放量应该是一个数值" },],
        designEarthquakeIntensity: [{ trigger: 'blur', validator: isNum, message: "设计地震烈度应该是一个数值" },],
        tailingsConveyingTypeGroupSet: [],
        averageParticleDiameter: [{ trigger: 'blur', validator: isNum, message: "尾矿平均粒经应该是一个数值" },],
        averageSlurryConcentration: [{ trigger: 'blur', validator: isNum, message: "平均矿浆浓度应该是一个数值" },],
        tailingsAccumulationDryDensity: [{ trigger: 'blur', validator: isNum, message: "尾矿堆积干密度应该是一个数值" },],
        mainChannelLength: [{ trigger: 'blur', validator: isNum, message: "主河槽长度应该是一个数值" },],
        catchmentArea: [{ trigger: 'blur', validator: isNum, message: "汇水面积应该是一个数值" },],
        initialFloodControlStandard: [],
        hasSafetyMonitoringFacilities: [],
        isMajorDanger: [],
        damViolations: [],
        beachTopElevation:[{ trigger: 'blur', validator: isNum, message: "滩顶高度应该是一个数值" },],
        downstreamConstructionSituation: [],
        tailingsDensity: [{ trigger: 'blur', validator: isNum, message: "尾矿密度应该是一个数值" },],
        mid2LateFloodControlStandards: [],
      },
      loading: false
    }
  },
  async mounted () {
    await this.cancel();
  },
  methods: {
    async submit () {
      this.$refs.form.validate(async (valid, errs) => {
        if (valid) {
          this.loading = true
          try {
            await setEnterpriseDetails(this.data);
          } catch (e) {
            this.$alert(e.message, "修改失败！", { type: "error" });
          } finally {
            await this.cancel(false);
          }
        } else if (errs) {
          let cnt = 1, message = "";
          _.forOwn(errs, (value) => {
            if (value.message) message += (cnt++) + ". " + value.message + "<br>";
            else if (value.length && value.length > 0) value.forEach(v => {
              if (v.message) message += (cnt++) + ". " + v.message + "<br>";
            });
          });
          this.$alert(message, "格式错误", { type: "error", dangerouslyUseHTMLString: true, closeOnClickModal: true });
        }
      });
    },
    async cancel (useCache, tailingNumber=this.currentTailingNumber) {
      if (useCache === undefined) useCache = true;
      this.loading = true
      try {
        let unit = await getEnterpriseDetails.call(this, useCache)
        let tailing = await getTailingInfoDetails ( tailingNumber , unit.id)
        tailing.tailingLevelIdSet = this.initCheckBox(tailingspondLevel , tailing.tailingLevelIdSet)
        tailing.designLevelIdSet = this.initCheckBox(tailingspondPresentLevel , tailing.designLevelIdSet)
        _.assign(this.data, unit , tailing);
      } catch (e) {
        this.$alert(e.message, '数据检索失败!', { type: 'error' });
      } finally {
        this.loading = false;
      }
    },
    checkRadioChange (arr) {
      if (!arr) return;
      while (arr.length > 1) arr.shift();
    },
    initCheckBox(array,set){
      let temp = []
      for (let i=0 ; i < set.length ; i++){
        temp.push(array[set[i]-1])
      }
      return temp
    }
  },
  computed:{
    ...mapGetters(['currentTailingNumber'])
  },
  watch:{
    currentTailingNumber(v){
      this.cancel(false, v)
    }
  }
}
</script>

<style scoped>
.content {
  margin-left: 40px;
  margin-top: 0.8vh;
  height: 82vh;
  overflow-y: scroll;
}

.card {
  height: 87vh;
  margin-right: 5px;
}

.bordered {
  border: #dcdfe6 solid 1px;
  padding-left: 0.6vw;
  border-radius: 4px;
  line-height: 40px;
}

.button-part {
  text-align: right;
}

</style>
